<!-- 全日制查看学生名单 -->
<template>
    <div class="">
        <div class="container">
            <div class="stu-header">
                <el-form label-position="right" :inline="true" class="demo-form-inline">
                    <el-form-item class="nine-form-title" prop="className" label="班级名称">
                        <span class="mtitle-font mtitle-color">{{searchParam.className || '无'}}</span>
                    </el-form-item>
                    <el-form-item prop="status" class="nine-form-title" style="margin-left: 20px" label="状态">
                        <el-radio-group v-model="searchParam.status">
                            <el-radio :label="0">全部</el-radio>
                            <el-radio :label="1">未结课</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="searchbt">
                        <el-button @click="getTableData">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table 
                :data="dataLists" class="table" :header-cell-style="{background: '#f1f1f1', color: '#333'}"
                ref="table" empty-text="暂无数据" border  :height="tableHeight" >
                <el-table-column
                    prop="studentId"
                    label="学号"
                    header-align="center"
                    align="center"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="studentName"
                    label="姓名"
                    header-align="center"
                    align="center">
                    <template slot-scope="props">
                        <a href="javaScript:" class="el-button--text" @click="viewStudentInfo(props.row)">{{props.row.studentName}}</a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="sex"
                    align="center"
                    header-align="center"
                    label="性别">
                </el-table-column>
                <el-table-column
                    prop="subjectNames"
                    align="center"
                    header-align="center"
                    label="选考科目">
                </el-table-column>
                <el-table-column
                    prop="target"
                    align="center"
                    header-align="center"
                    label="目标台阶">
                </el-table-column>
                <el-table-column
                    prop="resulterName"
                    align="center"
                    header-align="center"
                    label="业绩人">
                </el-table-column>           
                <el-table-column
                    label="操作"
                    align="left"
                    header-align="center"
                    width="300">
                    <template slot-scope="scope">
                        <el-button type="text" @click="classList(scope.$index, scope.row)">课表</el-button>
                        <el-button type="text" @click="classList(scope.$index, scope.row)">考试报告</el-button>
                        <el-button type="text" @click="classList(scope.$index, scope.row)">成绩首页</el-button>                        
                        <el-popover ref="popver" placement= "bottom" width="315" margin-right="60" trigger="click" style="margin-left:10px;">
                            <el-button type="text" @click="classList(scope.$index, scope.row)">例会详情</el-button>
                            <el-button type="text" style="margin-left:10px;" @click="classList(scope.$index, scope.row)">分班成绩</el-button>
                            <el-button slot="reference" type="text" icon="el-icon-setting" class="setting">更多</el-button>
                        </el-popover>      
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
  
</template>
<script>
import { baseUrl } from '@/utils/api'; 
import { toCusInfo } from '@/utils/helper';
export default {
    name: 'viewStudentList',
    data() {
        return {
            dataLists: [],//班级学生信息
            searchParam: {},//查询条件
            flag: true,//判断是否首页进入页面
            tableHeight: 50,
        }
    },
    activated() {
        // isUseCache为false时才重新刷新获取数据
        // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的         
        if(this.$route.meta.isUseCache == true){
            this.flag = false;    
            if(!this.searchParam.status){
                this.searchParam.status = 0;
            }
            this.getTableData();
        }
        // 通过这个控制刷新
        this.$route.meta.isUseCache = false;
    },
    beforeRouteLeave (to, from, next) { 
        // 根据是否删除操作，进行判断是否需要使用缓存数据
        to.meta.isUseCache = false;
        next();    
    },
    computed:{
        popver(){
            return this.$refs.popver;
        }
    },
    deactivated(){
        if(this.popver){
            this.popver.$el.getElementsByClassName('el-popper')[0].click()
        }           
    },
    created(){
        this.flag = false;
        if(!this.searchParam.status){
            this.searchParam.status = 0;
        }
        this.getTableData();
    },
    mounted() {
        let self = this; 
        this.$nextTick(function () {                 
            this.tableHeight = window.innerHeight -  this.$refs.table.$el.offsetTop - 50;                 
            // 监听窗口大小变化               
            window.onresize = function() {                     
                self.tableHeight = window.innerHeight -  self.$refs.table.$el.offsetTop - 50                 
            }             
        })             
        //this.$refs.table.$el.offsetTop：表格距离浏览器的高度     　　
        //50表示你想要调整的表格距离底部的高度（可以随意调整），因为我们一般 都有放分页组件的，所以需要给它留一个高度　 
    },
    methods: {
        /**
         * 获取列表页数据
         */
        getTableData(){
            let param = new URLSearchParams();
            param.append("classId", this.searchParam.classId||'');
            param.append("status", this.searchParam.status||'');
            this.$axios.post(baseUrl + '/ft/classmanage/getClassStudentList.do', param)
                .then(res =>{
                    if(res.data.code == 0){
                        this.dataLists = res.data.data;
                    }
                }, err =>{
                    this.$message.error(err);
                }
            )
        },
        /**
         * 查看学生信息
         */
        viewStudentInfo(item){
            if(item.customerId){
                toCusInfo(item.customerId);
            }
        }
    },
    watch:{
        'searchParam':{
            handler(newVal, oldVal){//监听值变化，页面未关闭时搜索条件是否已经改变
                if(newVal != oldVal && !this.flag){
                    this.flag = true;//已改变条件的不再使用原始缓存条件
                }
            }
        },
        deep:true
    },
    destroyed(){

    }
}
</script>
<style scoped>
    .stu-header{
        min-width: 900px;
    }
    .demo-form-inline{
        display: flex;
        flex-direction: row;
    }
    .searchbt{
        margin-left: 20px;
    }
</style>


